<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>统计商品总价</title>
<style>
body{
font-family:微软雅黑;
font-size:14px}
.title{
background: #f6f6f6;
font-size:18px;
}
.title,.content{
width:400px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title:not(:first-child),.content{
border-top:none;}
.title div{
width:100px;
text-align:center;
float:left}
.content{
clear:both}
.content div{
width:100px;
text-align:center;
float:left}
p{
width:380px;
text-align:right;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="title">
		<div>商品名称</div>
		<div>单价</div>
		<div>数量</div>
		<div>金额</div>
	</div>
	<div class="content" v-for="value in shop">
		<div>{{value.name}}</div>
		<div>{{value.price | twoDecimal}}</div>
		<div>{{value.count}}</div>
		<div>{{value.price*value.count | twoDecimal}}</div>
	</div>
	<p>合计：{{totalprice | formatPrice("¥")}}</p>
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		shop : [{//定义商品信息数组
			name : 'OPPO R15',
			price : 2999,
			count : 3
		},{
			name : '华为P20',
			price : 3699,
			count : 2
		}]
	},
	computed : {
		totalprice : function(){
			var total = 0;
			this.shop.forEach(function(s){
				total += s.price * s.count;//计算商品总价
			});
			return total;
		}
	},
	filters : {
		twoDecimal : function(value){
			return value.toFixed(2);//保留两位小数
		},
		formatPrice : function(value,symbol){
			return symbol + value.toFixed(2);//添加人民币符号并保留两位小数
		}
	}
})
</script>
</body>
</html>